<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>NippleJS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/assets/styles.css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="/assets/github-light.css" media="screen" title="no title" charset="utf-8">
        <style>
            body {
                margin: 0;
                padding: 0;
                margin-top: 20px;
                max-width: 1024px;
                margin-left: auto;
                margin-right: auto;
            }
            #buttons {
                position: relative;
                border: solid 1px #aaa;
                display: inline-block;
                width: 100%;
                border-radius: 10px;
                height: 50px;
                overflow: hidden;
                margin-bottom: 20px;
                box-sizing: border-box;
            }
            .button {
                display: inline-block;
                background: #ccc;
                color: black;
                height: 50px;
                width: 33%;
                margin: 0;
                margin-right: -3px;
                text-align: center;
                line-height: 45px;
                font-size: 25px;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .button:hover {
                background: #eee;
            }
            .button:active {
                background: #ddd;
            }
            .button.active {
                color: white;
                background: #888;
            }
            .button:nth-child(2) {
                width: 34%;
                border-left: solid 1px #aaa;
                border-right: solid 1px #aaa;
            }
            .highlight {
                display: none;
            }
            .highlight.active {
                display: block;
            }
            .zone {
                display: none;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
            }
            .zone.active {
                display: block;
            }
            .zone > h1 {
                position: absolute;
                padding: 10px 10px;
                margin: 0;
                color: white;
                right: 0;
                bottom: 0;
            }
            .zone.dynamic {
                background: rgba(0, 0, 255, 0.1);
            }
            .zone.semi {
                background: rgba(255, 255, 255, 0.1);
            }
            .zone.static {
                background: rgba(255, 0, 0, 0.1);
            }
        </style>
    </head>
    <body>
        <p>First thing first. A demo. Executed with this configuration : </p>
        <div class="dynamic active highlight highlight-javascript">
            <pre>
<span class="pl-k">&lt;</span>script src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>./dist/nipplejs.min.js<span class="pl-pds">"</span></span><span class="pl-k">&gt;&lt;/</span>script<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span>script<span class="pl-k">&gt;</span>
    <span class="pl-k">var</span> dynamic <span class="pl-k">=</span> nipplejs.create({
        zone: document.getElementById('dynamic'),
        color: 'blue'
    });
<span class="pl-k">&lt;/</span>script<span class="pl-k">&gt;</span></pre>
        </div>
        <div class="semi highlight highlight-javascript">
            <pre>
<span class="pl-k">&lt;</span>script src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>./dist/nipplejs.min.js<span class="pl-pds">"</span></span><span class="pl-k">&gt;&lt;/</span>script<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span>script<span class="pl-k">&gt;</span>
    <span class="pl-k">var</span> semi <span class="pl-k">=</span> nipplejs.create({
        zone: document.getElementById('semi'),
        mode: 'semi',
        catchDistance: 150,
        color: 'white'
    });
<span class="pl-k">&lt;/</span>script<span class="pl-k">&gt;</span></pre>
        </div>
        <div class="static highlight highlight-javascript">
            <pre>
<span class="pl-k">&lt;</span>script src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>./dist/nipplejs.min.js<span class="pl-pds">"</span></span><span class="pl-k">&gt;&lt;/</span>script<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span>script<span class="pl-k">&gt;</span>
    <span class="pl-k">var</span> static <span class="pl-k">=</span> nipplejs.create({
        zone: document.getElementById('static'),
        mode: 'static',
        position: {left: '50%', top: '50%'},
        color: 'red'
    });
<span class="pl-k">&lt;/</span>script<span class="pl-k">&gt;</span></pre>
        </div>
        <p>Choose the mode you want to test.</p>
        <div id="buttons">
            <div data-type="dynamic" class="active button dynamic">dynamic</div>
            <div data-type="semi" class="button semi">semi</div>
            <div data-type="static" class="button static">static</div>
        </div>
        <div id="zone_joystick">
            <div id="debug">
                <ul>
                    <li class="position">
                        position :
                        <ul>
                            <li class="x">x : <span class='data'></span></li>
                            <li class="y">y : <span class='data'></span></li>
                        </ul>
                    </li>
                    <li class="force">force : <span class='data'></span></li>
                    <li class="pressure">pressure : <span class='data'></span></li>
                    <li class="distance">distance : <span class='data'></span></li>
                    <li class="angle">
                        angle :
                        <ul>
                            <li class="radian">radian : <span class='data'></span></li>
                            <li class="degree">degree : <span class='data'></span></li>
                        </ul>
                    </li>
                    <li class="direction">
                        direction :
                        <ul>
                            <li class="x">x : <span class='data'></span></li>
                            <li class="y">y : <span class='data'></span></li>
                            <li class="angle">angle : <span class='data'></span></li>
                        </ul>
                    </li>
                </ul>
                <div class="dump"></div>
            </div>
            <div class="zone dynamic active"><h1>dynamic</h1></div>
            <div class="zone semi"><h1>semi</h1></div>
            <div class="zone static"><h1>static</h1></div>
        </div>
        <br/>
        <div>
            <a href="https://codepen.io/YoannM/full/gapmMG" target="_blank">> Open the demo in a new window.</a>
        </div>
        <script src="/dist/nipplejs.js"></script>
        <script>
            var s = function (sel) { return document.querySelector(sel); };
            var sId = function (sel) { return document.getElementById(sel); };
            var removeClass = function (el, clss) {
                el.className = el.className.replace(new RegExp('\\b' + clss + ' ?\\b', 'g'), '');
            }
            var joysticks = {
                dynamic: {
                    zone: s('.zone.dynamic'),
                    color: 'blue',
                    multitouch: true
                },
                semi: {
                    zone: s('.zone.semi'),
                    mode: 'semi',
                    catchDistance: 150,
                    color: 'white'
                },
                static: {
                    zone: s('.zone.static'),
                    mode: 'static',
                    position: {left: '50%', top: '50%'},
                    color: 'red'
                }
            };
            var joystick;

            // Get debug elements and map them
            var elDebug = sId('debug');
            var elDump = elDebug.querySelector('.dump');
            var els = {
                position: {
                    x: elDebug.querySelector('.position .x .data'),
                    y: elDebug.querySelector('.position .y .data')
                },
                force: elDebug.querySelector('.force .data'),
                pressure: elDebug.querySelector('.pressure .data'),
                distance: elDebug.querySelector('.distance .data'),
                angle: {
                    radian: elDebug.querySelector('.angle .radian .data'),
                    degree: elDebug.querySelector('.angle .degree .data')
                },
                direction: {
                    x: elDebug.querySelector('.direction .x .data'),
                    y: elDebug.querySelector('.direction .y .data'),
                    angle: elDebug.querySelector('.direction .angle .data')
                }
            };

            var timeoutCreate;
            function createThrottle (evt) {
                clearTimeout(timeoutCreate);
                timeoutCreate = setTimeout(() => {
                    createNipple(evt);
                }, 100);
            }

            sId('buttons').onclick = sId('buttons').ontouchend = createThrottle;

            createNipple('dynamic');

            function bindNipple () {
                joystick.on('start end', function (evt, data) {
                    dump(evt.type);
                    debug(data);
                }).on('move', function (evt, data) {
                    debug(data);
                }).on('dir:up plain:up dir:left plain:left dir:down ' +
                    'plain:down dir:right plain:right',
                    function (evt, data) {
                        dump(evt.type);
                    }
                ).on('pressure', function (evt, data) {
                    debug({pressure: data});
                });
            }

            function createNipple (evt) {
                var type = typeof evt === 'string' ?
                    evt : evt.target.getAttribute('data-type');
                if (joystick) {
                    joystick.destroy();
                }

                removeClass(s('.zone.active'), 'active');
                removeClass(s('.button.active'), 'active');
                removeClass(s('.highlight.active'), 'active');
                s('.highlight.' + type).className += ' active';
                s('.button.' + type).className += ' active';
                s('.zone.' + type).className += ' active';
                joystick = nipplejs.create(joysticks[type]);
                bindNipple();
            }

            // Print data into elements
            function debug (obj) {
                function parseObj(sub, el) {
                    for (var i in sub) {
                        if (typeof sub[i] === 'object' && el) {
                            parseObj(sub[i], el[i]);
                        } else if (el && el[i]) {
                            el[i].innerHTML = sub[i];
                        }
                    }
                }
                setTimeout(function () {
                    parseObj(obj, els);
                }, 0);
            }

            var nbEvents = 0;

            // Dump data
            function dump (evt) {
                setTimeout(function () {
                    if (elDump.children.length > 4) {
                        elDump.removeChild(elDump.firstChild);
                    }
                    var newEvent = document.createElement('div');
                    newEvent.innerHTML = '#' + nbEvents + ' : <span class="data">' +
                        evt + '</span>';
                    elDump.appendChild(newEvent);
                    nbEvents += 1;
                }, 0);
            }
        </script>
    </body>
</html>
